<template>
  <div class="users">
 
 <el-row>
      <el-button type="primary" @click="isShowCreateTk=true">添加</el-button>
 </el-row>
      <el-row>
      
      <el-input v-model="search" style="width:130px "></el-input>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</el-row>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>


      <el-table-column
      prop="address"
      label="操作">
      <template >
          <el-button type="primary" @click="isShowEditTk=true">修改</el-button>
  <el-button type="success">删除</el-button>
 
      </template>  
    </el-table-column>
  </el-table>
<!-- 分页 -->
  <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

<!-- 添加弹框 -->
<el-dialog
  title="提示"
  :visible.sync="isShowCreateTk"
  width="30%"
  :before-close="handleClose">
  <span>用户添加</span>




<el-form ref="form" :rules="rules" :model="usersFormData" label-width="80px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="usersFormData.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="usersFormData.password"></el-input>
  </el-form-item>
    <el-form-item label="邮箱" prop="email">
    <el-input v-model="usersFormData.email"></el-input>
  </el-form-item>

   <el-form-item label="手机号" prop="mobile">
    <el-input v-model="usersFormData.mobile"></el-input>
  </el-form-item>
 

 


</el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="isShowCreateTk = false">取 消</el-button>
    <el-button type="primary" @click="createFn">确 定</el-button>
  </span>
</el-dialog>


<!-- 添加弹框 -->
<el-dialog
  title="提示"
  :visible.sync="isShowEditTk"
  width="30%"
  :before-close="handleClose">
  <span>修改</span>




<el-form ref="form" :rules="rules" :model="usersEditFormData" label-width="80px">
  

    <el-form-item label="邮箱" prop="email">
    <el-input v-model="usersEditFormData.email"></el-input>
  </el-form-item>

   <el-form-item label="手机号" prop="mobile">
    <el-input v-model="usersEditFormData.mobile"></el-input>
  </el-form-item>
 

 


</el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="isShowCreateTk = false">取 消</el-button>
    <el-button type="primary" @click="createFn">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {

//用户修改表单数据
usersEditFormData:{
    email:'',
    mobile:'',
},

          //添加数据弹框状态
          isShowCreateTk:false,
          isShowEditTk:false,

          //添加表单数据
          usersFormData:{
              username:"",
              password:"",
             email:"",
              mobile:"",

          },
          rules:{
              username:[{required:true, message:'请输入用户名',trigger:'blur'}],
                 password:[{required:true, message:'请输入密码',trigger:'blur'}],
                    email:[{required:true, message:'请输入邮箱',trigger:'blur'}],
                       mobile:[{required:true, message:'请输入手机号',trigger:'blur'}],


          },

        


        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods:{
         handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
        //   .catch() => {});
      },
        createFn(){
            //发生请求

            //隐藏弹框
            this.isShowCreateTk=false
         
        }
    }
  }
</script>

<style scoped lang='scss' >

</style>